<template>
	<view class="yj">
		<view class=" flex-between" style="height: 240rpx;">
			<view class="" style="width: 70%;">
				<view class="" style="font-size: large;font-weight: bold;">引荐奖励</view>
				<view class="" style="font-size: small;color: #8a9959;">
					引荐更多师傅加入小黄帽服务，领取专属奖励。
				</view>
			</view>
			<view class="" style="width: 30%;">
				<image src="@/static/Frame.png" style="width: 100%;" mode="aspectFit"></image>
			</view>
		</view>
		<view class="bg">
			<view class="" style="text-align: center;font-weight: bold;line-height: 2;padding-top: 50rpx;">
				已引荐
			</view>
			<view class="" style="text-align: center;font-weight: bold;font-size: 50rpx;line-height: 2;">
				0
			</view>
			<view class="" style="padding: 0 30rpx;margin-top: 45rpx;">
				<u-line dashed color="#000"></u-line>
			</view>
			<view class="flex-between " style="margin-top: 30rpx;padding: 0 20rpx;">
				<view style="width: 40%;">
					<button open-type="share"
						style="height: 80rpx;border-radius: 90rpx;background-color: #CEEE5B;display: flex;justify-content: center;align-items: center;">
						<image src="/static/Frame-2.png" style="width: 40rpx;height: 40rpx;"></image>
						<view class="" style="font-size: small;">
							分享微信好友
						</view>
					</button>
				</view>
				<view class="button" style="display: flex;justify-content: center;align-items: center;">
					<image src="/static/Frame-1.png" style="width: 40rpx;height: 40rpx;"></image>
					<view class="" style="font-size: small;" @click="show=true">
						保存二维码
					</view>
				</view>
			</view>
		</view>
		<u-popup :show="show" mode="center" @close="show=false">
			<view style="width: 70vw;padding: 30rpx;">
				<view class="" style="display: flex;justify-content: center;width: 100%;">
					<image src="/static/lg.png"
						style="width: 140rpx;height: 140rpx;border-radius: 50%;background-color: red;"></image>
				</view>
				<view class="" style="display: flex;justify-content: center;width: 100%;margin: 30rpx 0;">
					<image src="/static/Frame.png"
						style="width: 300rpx;height: 300rpx;border-radius: 12rpx;background-color: #ccc;"></image>
				</view>
				<view style="text-align: center;">长按图片可保存或分享</view>
				<view class="flex-between " style="margin-top: 30rpx;padding: 0 20rpx;">
					<view
						style="width: 40%;height: 80rpx;border-radius: 90rpx;background-color: #Ccc;text-align: center;line-height: 80rpx;"
						@click="show=false">
						取消
					</view>
					<view
						style="width: 40%;height: 80rpx;border-radius: 90rpx;background-color: #CEEE5B;text-align: center;line-height: 80rpx;">
						保存
					</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				show: false
			};
		},
		onShareAppMessage(e) {
			console.log('e: ', e);
			return {
				title: '加入小黄帽服务平台',
				path: '/subpack/login/login',
				imageUrl: '/static/Frame.png'
			}
		}
	}
</script>

<style lang="scss" scoped>
	.yj {
		height: calc(100vh - 15px);
		background: linear-gradient(to bottom, #CEEE5B, 30%, #fff);
		padding: 30rpx;
		position: relative;

		.bg {
			background: url(/static/Subtract.png) no-repeat center;
			background-size: 100% 100%;
			height: 400rpx;

			.button {
				width: 40%;
				height: 80rpx;
				border-radius: 90rpx;
				background-color: #CEEE5B;
				text-align: center;
				line-height: 80rpx;
			}
		}
	}
</style>